<template>
  <div class="app-container search-table-box aidex-table">
    <el-card shadow="never" ref="queryRef" style="margin-bottom: 12px;" class="search_card" v-show="showSearch">
      <div class="filter-container">
        <div class="search_box" style="padding-bottom: 16px">
          <el-form :model="queryParams" ref="queryForm" label-width="80px" size="mini">
            <el-row :gutter="16">
              <el-col :md="8" >
                <el-form-item prop="searchValues">
                  <el-select
                    v-model="queryParams.searchValues"
                    multiple
                    filterable
                    remote
                    reserve-keyword
                    clearable
                    placeholder="请输入购方名称/ERP发票号/开票号码"
                    :remote-method="remoteSearchValue"
                    @change="handleQuery"
                    :loading="remoteSearchValueLoading"
                    style="width: 415px;margin-left: -78px"
                  >
                    <el-option
                      v-for="item in searchValueOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="4" >
                <el-button size="mini"  @click="toggleAdvanced" type="primary" plain style="padding: 6px 15px;">
                  {{ advanced ? '收起' : '展开' }}
                  <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                </el-button>
              </el-col>
            </el-row>
            <div class="search_advanced_bar" v-if="advanced">
              <el-card shadow="never" >
                <el-row :gutter="16" >
<!--                  <el-col :md="6" >-->
<!--                    <el-form-item label="公司" prop="siteCode">-->
<!--                      <el-input v-model="queryParams.params.companynames" maxlength = 0 clearable placeholder="请选择公司" >-->
<!--                        <el-button slot="append" icon="el-icon-search" @click="openSearchsiteCodeDialogOpen">-->
<!--                        </el-button>-->
<!--                      </el-input>-->
<!--                    </el-form-item>-->
<!--                  </el-col>-->
                  <el-col :md="8" >
                    <el-form-item label="创建日期">
                      <el-date-picker
                        v-model="daterangeCreateTime"
                        style="width: 100%"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :md="6" align="right" style="float: right;" >
                    <el-form-item>
                      <el-button class="filter-item" type="primary" @click="handleQuery">搜索</el-button>
                      <el-button class="filter-item" style="margin-left: 8px" @click="resetQuery">重置</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="16">
                  <el-col :md="24" >
                    <el-form-item label="发票类型" prop="invoiceType">
                      <el-row :gutter="16">
                        <el-col :md="4" >
                          <el-checkbox v-model="checkAllInvoiceType" :indeterminate="isInvoiceTypeIndeterminate" label="全选" size="mini" @change="checkAll($event,'invoiceType')" border></el-checkbox>
                        </el-col>
                        <el-col :md="19" >
                          <el-checkbox-group v-model="queryParams.invoiceTypes" @change="handleCheckedChange($event,'invoiceType')">
                            <el-checkbox v-for="dict in dict.type.invoice_type" :label="dict.value" :key="dict.value">{{dict.label}}</el-checkbox>
                          </el-checkbox-group>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="16">
                  <el-col :md="24" >
                    <el-form-item label="处理状态" prop="processStatus">
                      <el-row :gutter="16">
                        <el-col :md="4" >
                          <el-checkbox v-model="checkAllProcessStatus" :indeterminate="isProcessStatusIndeterminate" label="全选" size="mini" @change="checkAll($event,'processStatus')" border></el-checkbox>
                        </el-col>
                        <el-col :md="18" >
                          <el-checkbox-group v-model="queryParams.processStatuses" @change="handleCheckedChange($event,'processStatus')">
                            <el-checkbox v-if="dict.value == 20 || dict.value == 30" v-for="dict in dict.type.process_status" :label="dict.value" :key="dict.value">{{dict.label}}</el-checkbox>
                          </el-checkbox-group>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-card>
            </div>

          </el-form>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" >
      <template #header>
        <el-row>
          <el-col :span="8">
            <div class="card-header">
              <el-button disabled type="text">待开发票信息</el-button>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="btn_box" align="right" style="float: right;">
              <el-button
                class="filter-item"
                style="margin-left: 8px;"
                icon="el-icon-delete"
                type="danger"
                :disabled="multiple"
                @click="handleDelete"
                size="mini"
                v-if="!multiple"
                v-hasPermi="['doc:invoice:remove']"
              >删除</el-button>
              <el-button
                class="filter-item"
                style="margin-left: 8px;"
                type="primary"
                :disabled="single"
                @click="handleIssuePreview"
                size="mini"
              >开票</el-button>
              <el-button
                class="filter-item"
                style="margin-left: 8px;"
                icon="el-icon-download"
                @click="handleExport"
                size="mini"
                v-hasPermi="['doc:invoice:export']"
              >导出</el-button>
              <right-toolbar :showSearch.sync="showSearch" :columns.sync="columns" :columnsKey.sync="columnsKey" @showSearchFun="showSearchFun" @queryTable="getList" :tableKey.sync="tableKey"></right-toolbar>
            </div>
          </el-col>
        </el-row>
      </template>

      <el-table
        border
        stripe
        default-expand-all
        ref="tableRef"
        :key="tableKey"
        v-loading="loading"
        :data="invoiceList"
        @selection-change="handleSelectionChange"
        :row-style="rowClass"
        :header-cell-style= "{
                'font-size': '14px !important',
                'font-weight': '500 !important',
                'color': 'rgb(0 0 0)',
                'background-color': 'rgb(205 224 255)',
              }"
        highlight-current-row style="width: 100%;"
        :height="tableHeight"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" type="index" align="center" width="55">
          <template slot-scope="scope">
            <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <template v-for="item in columns">
<!--          <el-table-column label="公司" align="center" key="siteName" prop="siteName" v-if="item.visible && item.label=='公司'" :show-overflow-tooltip="true"/>-->
          <el-table-column label="发票类型" align="center" key="invoiceTypeName" prop="invoiceTypeName" v-if="item.visible && item.label=='发票类型'"  width="200"/>
          <el-table-column label="开票号码" align="center" key="applyNo" prop="applyNo"  v-if="item.visible && item.label=='开票号码'"  width="170"/>
          <el-table-column label="ERP发票号" align="center" key="orderNo" prop="orderNo"  v-if="item.visible && item.label=='ERP发票号'"  width="140"/>
          <el-table-column label="处理状态" align="center" key="processStatusName" prop="processStatusName"  v-if="item.visible && item.label=='处理状态'"  width="100"/>
          <el-table-column label="购方名称"       align="center" key="buyerName" prop="buyerName"  v-if="item.visible && item.label=='购方名称'"  width="180" :show-overflow-tooltip="true"/>
          <el-table-column label="金额(含税)"         align="center" key="fee" prop="fee"  v-if="item.visible && item.label=='金额(含税)'"  width="120"/>
          <el-table-column label="金额(不含税)"         align="center" key="feeWithoutTax" prop="feeWithoutTax"  v-if="item.visible && item.label=='金额(不含税)'"  width="120"/>
          <el-table-column label="税额"         align="center" key="tax" prop="tax"  v-if="item.visible && item.label=='税额'"  width="120"/>
          <el-table-column label="销方名称"     align="center" key="sellerName" prop="sellerName"  v-if="item.visible && item.label=='销方名称'"  width="250" :show-overflow-tooltip="true"/>
          <el-table-column label="备注" align="center" key="invoiceRemark" prop="invoiceRemark"  v-if="item.visible && item.label=='备注'"  width="200" :show-overflow-tooltip="true"/>
          <el-table-column label="ERP发票流水号" align="center" key="erpSerialNumber" prop="erpSerialNumber"  v-if="item.visible && item.label=='ERP发票流水号'"  width="180" :show-overflow-tooltip="true"/>
          <el-table-column label="添加人" align="center" key="createBy" prop="createBy"  v-if="item.visible && item.label=='添加人'"  width="100"/>
          <el-table-column label="添加时间" align="center" key="createTime" prop="createTime"  v-if="item.visible && item.label=='添加时间'"  width="170"/>
          <el-table-column label="修改人" align="center" key="updateBy" prop="updateBy"  v-if="item.visible && item.label=='修改人'"  width="100"/>
          <el-table-column label="修改时间" align="center" key="updateTime" prop="updateTime" v-if="item.visible && item.label=='修改时间'"  width="170">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </template>

        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="160">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="jumpToDetail(scope.row)"
              v-hasPermi="['doc:invoice:edit']"
            >详情</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button
              type="text"
              @click="showYangZhang(scope.row)"
              v-hasPermi="['doc:invoice:remove']"
            >样张</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button
              type="text"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['doc:invoice:update']"
            >修改</el-button>
          </template>
        </el-table-column>
        <div slot="empty">
          <svg-icon icon-class="search-none" style="font-size: 64px;" />
          <p>暂无数据</p>
        </div>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改销项发票对话框 -->
      <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="720px" top="10vh" append-to-body>
        <div style="height: 490px;overflow: auto; padding: 12px 24px;">
          <el-form ref="form" size="mini" :model="form" :rules="rules" label-position="top">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="发票ID" prop="invoiceId">
                  <el-input v-model="form.invoiceId" placeholder="请输入发票ID" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="公司代码" prop="custId">
                  <el-input v-model="form.custId" placeholder="请输入公司代码" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="${columnAlias}" prop="siteCode">
                  <el-input
                    v-model="form.companyname"
                    maxlength = 0
                    clearable
                    readonly
                    placeholder="请选择公司代码"
                  >
                    <el-button slot="append" icon="el-icon-search" @click="opensiteCodeDialogOpen">
                    </el-button>
                  </el-input>
                </el-form-item>
              </el-col>
<!--              <el-col :span="12">-->
<!--                <el-form-item label="公司" prop="siteName">-->
<!--                  <el-input v-model="form.siteName" placeholder="请输入公司" />-->
<!--                </el-form-item>-->
<!--              </el-col>-->
              <el-col :span="12">
                <el-form-item label="发票类型" prop="invoiceType">
                  <el-select v-model="form.invoiceTypes" placeholder="请选择发票类型" clearable filterable style="width: 100%;">
                    <el-option
                      v-for="dict in dict.type.invoice_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发票类型" prop="invoiceTypeName">
                  <el-input v-model="form.invoiceTypeName" placeholder="请输入发票类型" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发票号码" prop="invoiceNo">
                  <el-input v-model="form.invoiceNo" placeholder="请输入发票号码" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发票代码" prop="invoiceCode">
                  <el-input v-model="form.invoiceCode" placeholder="请输入发票代码" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开票日期" prop="invoiceDate">
                  <el-date-picker clearable
                                  style="width: 100%;"
                                  v-model="form.invoiceDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择开票日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="印刷序号" prop="printNumber">
                  <el-input v-model="form.printNumber" placeholder="请输入印刷序号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="金额(不含税)" prop="feeWithoutTax">
                  <el-input v-model="form.feeWithoutTax" placeholder="请输入金额(不含税)" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="金额(含税)" prop="fee">
                  <el-input v-model="form.fee" placeholder="请输入金额(含税)" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="税额" prop="tax">
                  <el-input v-model="form.tax" placeholder="请输入税额" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销方名称" prop="sellerName">
                  <el-input v-model="form.sellerName" placeholder="请输入销方名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销方纳税识别号" prop="sellerNumber">
                  <el-input v-model="form.sellerNumber" placeholder="请输入销方纳税识别号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="乘车行程" prop="sellerDest">
                  <el-input v-model="form.sellerDest" placeholder="请输入乘车行程" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销方地址" prop="sellerAddress">
                  <el-input v-model="form.sellerAddress" placeholder="请输入销方地址" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销方电话" prop="sellerTel">
                  <el-input v-model="form.sellerTel" placeholder="请输入销方电话" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销方开户行" prop="sellerBank">
                  <el-input v-model="form.sellerBank" placeholder="请输入销方开户行" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销方账号" prop="sellerAccount">
                  <el-input v-model="form.sellerAccount" placeholder="请输入销方账号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="名称" prop="buyerName">
                  <el-input v-model="form.buyerName" placeholder="请输入名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="纳税识别号" prop="buyerNumber">
                  <el-input v-model="form.buyerNumber" placeholder="请输入纳税识别号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="地址" prop="buyerAddress">
                  <el-input v-model="form.buyerAddress" placeholder="请输入地址" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电话" prop="buyerTel">
                  <el-input v-model="form.buyerTel" placeholder="请输入电话" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开户行" prop="buyerBank">
                  <el-input v-model="form.buyerBank" placeholder="请输入开户行" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="账号" prop="buyerAccount">
                  <el-input v-model="form.buyerAccount" placeholder="请输入账号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="凭证号" prop="voucherNumber">
                  <el-input v-model="form.voucherNumber" placeholder="请输入凭证号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入账日期" prop="accountDate">
                  <el-date-picker clearable
                                  style="width: 100%;"
                                  v-model="form.accountDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择入账日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入账状态代码" prop="accountStatus">
                  <el-radio-group v-model="form.accountStatus">
                    <el-radio-button
                      v-for="dict in dict.type.account_status"
                      :key="dict.value"
                      :label="parseInt(dict.value)"
                    >{{dict.label}}</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入账状态" prop="accountStatusName">
                  <el-input v-model="form.accountStatusName" placeholder="请输入入账状态" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="处理状态代码" prop="processStatus">
                  <el-radio-group v-model="form.processStatus">
                    <el-radio-button
                      v-for="dict in dict.type.process_status"
                      :key="dict.value"
                      :label="parseInt(dict.value)"
                    >{{dict.label}}</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="处理状态" prop="processStatusName">
                  <el-input v-model="form.processStatusName" placeholder="请输入处理状态" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发票状态代码" prop="invoiceStatus">
                  <el-radio-group v-model="form.invoiceStatus">
                    <el-radio-button
                      v-for="dict in dict.type.invoice_status"
                      :key="dict.value"
                      :label="parseInt(dict.value)"
                    >{{dict.label}}</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发票状态" prop="invoiceStatusName">
                  <el-input v-model="form.invoiceStatusName" placeholder="请输入发票状态" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="查验状态" prop="checkStatus">
                  <el-radio-group v-model="form.checkStatus">
                    <el-radio-button
                      v-for="dict in dict.type.check_status"
                      :key="dict.value"
                      :label="parseInt(dict.value)"
                    >{{dict.label}}</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="查验状态" prop="checkStatusName">
                  <el-input v-model="form.checkStatusName" placeholder="请输入查验状态" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="采集状态" prop="collectStatus">
                  <el-radio-group v-model="form.collectStatus">
                    <el-radio-button
                      v-for="dict in dict.type.collect_status"
                      :key="dict.value"
                      :label="parseInt(dict.value)"
                    >{{dict.label}}</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="采集状态" prop="collectStatusName">
                  <el-input v-model="form.collectStatusName" placeholder="请输入采集状态" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="签收状态" prop="signStatus">
                  <el-radio-group v-model="form.signStatus">
                    <el-radio-button
                      v-for="dict in dict.type.sign_status"
                      :key="dict.value"
                      :label="parseInt(dict.value)"
                    >{{dict.label}}</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="签收状态" prop="signStatusName">
                  <el-input v-model="form.signStatusName" placeholder="请输入签收状态" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="匹配状态" prop="matchStatus">
                  <el-radio-group v-model="form.matchStatus">
                    <el-radio-button
                      v-for="dict in dict.type.match_status"
                      :key="dict.value"
                      :label="parseInt(dict.value)"
                    >{{dict.label}}</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="匹配状态" prop="matchStatusName">
                  <el-input v-model="form.matchStatusName" placeholder="请输入匹配状态" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报销状态" prop="submitStatus">
                  <el-radio-group v-model="form.submitStatus">
                    <el-radio-button
                      v-for="dict in dict.type.submit_status"
                      :key="dict.value"
                      :label="parseInt(dict.value)"
                    >{{dict.label}}</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报销状态" prop="submitStatusName">
                  <el-input v-model="form.submitStatusName" placeholder="请输入报销状态" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="校验码" prop="checkCode">
                  <el-input v-model="form.checkCode" placeholder="请输入校验码" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发票备注" prop="invoiceRemark">
                  <el-input v-model="form.invoiceRemark" placeholder="请输入发票备注" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="ERP发票流水号" prop="erpSerialNumber">
                  <el-input v-model="form.erpSerialNumber" placeholder="请输入ERP发票流水号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="添加人" prop="createName">
                  <el-input v-model="form.createName" placeholder="请输入添加人" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="修改人" prop="updateBy">
                  <el-input v-model="form.updateBy" placeholder="请输入修改人" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="修改时间" prop="updateTime">
                  <el-date-picker clearable
                                  style="width: 100%;"
                                  v-model="form.updateTime"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择修改时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-divider content-position="center">销项待开信息</el-divider>
              </el-col>
              <el-col :span="24">
                <el-button type="primary" icon="el-icon-plus" @click="handleAddTSalInvoiceEntry">添加</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="handleDeleteTSalInvoiceEntry">删除</el-button>
              </el-col>
              <el-col :span="24">
                <el-table :data="tSalInvoiceEntryList" :row-class-name="rowTSalInvoiceEntryIndex" @selection-change="handleTSalInvoiceEntrySelectionChange" style="width: 100%" height="300px" ref="tSalInvoiceEntry">
                  <el-table-column type="selection" width="50" align="center" />
                  <el-table-column label="序号" type="index" align="center">
                    <template slot-scope="scope">
                      <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="开票项ID" prop="entryId" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.entryId" placeholder="请输入开票项ID" />
                    </template>
                  </el-table-column>
                  <el-table-column label="公司代码" prop="custId" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.custId" placeholder="请输入公司代码" />
                    </template>
                  </el-table-column>
                  <el-table-column label="公司代码" prop="siteCode" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.siteCode" placeholder="请输入公司代码" />
                    </template>
                  </el-table-column>
<!--                  <el-table-column label="公司" prop="siteName" width="150">-->
<!--                    <template slot-scope="scope">-->
<!--                      <el-input v-model="scope.row.siteName" placeholder="请输入公司" />-->
<!--                    </template>-->
<!--                  </el-table-column>-->
                  <el-table-column label="项目名称" prop="itemName" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.itemName" placeholder="请输入项目名称" />
                    </template>
                  </el-table-column>
                  <el-table-column label="规格型号" prop="invoiceCode" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.invoiceCode" placeholder="请输入规格型号" />
                    </template>
                  </el-table-column>
                  <el-table-column label="单位" prop="unit" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.unit" placeholder="请输入单位" />
                    </template>
                  </el-table-column>
                  <el-table-column label="数量" prop="qty" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.qty" placeholder="请输入数量" />
                    </template>
                  </el-table-column>
                  <el-table-column label="单价(不含税)" prop="withoutPrice" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.withoutPrice" placeholder="请输入单价(不含税)" />
                    </template>
                  </el-table-column>
                  <el-table-column label="金额(不含税)" prop="withoutAmount" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.withoutAmount" placeholder="请输入金额(不含税)" />
                    </template>
                  </el-table-column>
                  <el-table-column label="税率" prop="taxRate" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.taxRate" placeholder="请输入税率" />
                    </template>
                  </el-table-column>
                  <el-table-column label="税额" prop="tax" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.tax" placeholder="请输入税额" />
                    </template>
                  </el-table-column>
                  <el-table-column label="单价(含税)" prop="price" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.price" placeholder="请输入单价(含税)" />
                    </template>
                  </el-table-column>
                  <el-table-column label="金额(含税)" prop="amount" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.amount" placeholder="请输入金额(含税)" />
                    </template>
                  </el-table-column>
                  <el-table-column label="添加人" prop="createName" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.createName" placeholder="请输入添加人" />
                    </template>
                  </el-table-column>
                  <el-table-column label="修改人" prop="updateBy" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.updateBy" placeholder="请输入修改人" />
                    </template>
                  </el-table-column>
                  <el-table-column label="修改时间" prop="updateTime" width="240">
                    <template slot-scope="scope">
                      <el-date-picker clearable v-model="scope.row.updateTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择修改时间" />
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary"  size="mini" @click="submitForm">确 定</el-button>
          <el-button  size="mini" @click="cancel">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 查看发票 -->
      <el-dialog v-dialogDrag  :close-on-click-modal="false" title="发票样张" :visible.sync="invoiceOpen" width="1000px" append-to-body>
        <div class="dialog_box" style="height:650px;">
          <el-row>
            <el-col :span="24">
              <div style="height: 575px; background-color:#404040;">
                <div v-viewer style="visibility: hidden;height:575px">
                  <img v-for="src in images" :key="src" :src="src" :data-source="src">
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-dialog>

      <!-- 开票预览 -->
      <el-dialog v-dialogDrag  :close-on-click-modal="false" title="开票预览" :visible.sync="invoicePreviewOpen" width="1400px" append-to-body>
        <div class="dialog_box" style="height:650px;">
          <el-row style="padding-top: 10px;width: 98%;padding: 20px 52px 25px;min-width: 1300px;margin: 14px auto 0;background: #fff;position: relative;" class="v-deep" >
            <el-col :span="1">
              <div class="pages-account-output-invoice-style-cube-list">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
              </div>
            </el-col>
            <el-col :span="22" style="width:99%">
              <div class="pages-account-output-invoice-style-title">{{detailForm.invoiceTypeName}}</div>
              <el-form ref="detailForm" v-model="detailForm" label-position="left" label-width="60px" size="small">
                <el-row :gutter="10">
                  <div class="invoice-opening-tale">
                    <div class="purchase">
                      <div class="first">购买方</div>
                      <div class="second">
                        <div class="inner"><strong style="color: red; margin-right: 2px">*</strong>购买名称</div>
                        <div class="inner">纳税人识别号</div>
                        <div class="inner">地址、电话</div>
                        <div class="inner" style="border-bottom: 0px solid #b76440;">开户行及账号</div>
                      </div>
                      <div class="third">
                        <div class="inner">
                          {{detailForm.buyerName}}
                        </div>
                        <div class="inner">{{detailForm.buyerNumber}}</div>
                        <div class="inner">
                          {{detailForm.buyerAddress}}
                          {{detailForm.buyerTel}}
                        </div>
                        <div class="inner" style=" border: 0 solid #b76440;">
                          {{detailForm.buyerBank}}
                          {{detailForm.buyerAccount}}
                        </div>
                      </div>
                      <div class="first" >销售方</div>
                      <div class="second" >
                        <div class="inner" ><strong style="color: red; margin-right: 2px">*</strong>销售名称</div>
                        <div class="inner" ><strong style="color: red; margin-right: 2px">*</strong>纳税人识别号</div>
                        <div class="inner" ><strong style="color: red; margin-right: 2px">*</strong>地址、电话</div>
                        <div class="inner" style="border-bottom: 0px solid #b76440;"><strong style="color: red">*</strong>开户行及账号</div>
                      </div>
                      <div class="third">
                        <div class="inner">
                          {{detailForm.sellerName}}
                        </div>
                        <div class="inner">
                          {{detailForm.sellerNumber}}
                        </div>
                        <div class="inner">
                          {{detailForm.sellerAddress}}
                          {{detailForm.sellerTel}}
                        </div>
                        <div class="inner" style=" border: 0 solid #b76440;">
                          {{detailForm.sellerBank}}
                          {{detailForm.sellerAccount}}
                        </div>
                      </div>
                    </div>
                    <div  :class=" 'goods ' +   (isFullScreen ? 'full-screen': '' )">
                      <el-table
                        border
                        stripe
                        default-expand-all
                        ref="tableRef"
                        v-loading="loading"
                        :data="invoiceEntryList"
                        :header-cell-style= "{
                        'font-size': '13px !important',
                        'font-weight': '600 !important',
                        'color':'#b76440',
                        'padding': '0px 0',
                        'background-color':'#FFF',
                        'border-bottom': '1px solid #b76440',
                        textAlign: 'left',
                        'height': '30px !important'
                    }"
                        :cell-style="{ padding: '8px 10px 8px 0', textAlign: 'left' }"
                        highlight-current-row style="width: 100%;"
                        :height="!isFullScreen ? 400 : '80vh'"
                      >
                        <el-table-column label="序号" align="center" prop="index" width="50">
                          <template slot-scope="scope">{{scope.$index+1}}</template>
                        </el-table-column>
                        <el-table-column label="货物或应税劳务、服务名称" align="left" prop="productCode" width="250">
                          <template slot-scope="scope">
                            {{scope.row.productName}}
                          </template>
                        </el-table-column>
                        <el-table-column label="规格型号" align="left" prop="specificatCode" >
                          <template slot-scope="scope">
                            {{scope.row.specificatCode}}
                          </template>
                        </el-table-column>
                        <el-table-column label="单位" align="left" prop="unit" width="80">
                          <template slot-scope="scope">
                            {{scope.row.unit}}
                          </template>
                        </el-table-column>
                        <el-table-column label="数量" align="left" prop="qty" width="100">
                          <template slot-scope="scope">
                            {{scope.row.qty}}
                          </template>
                        </el-table-column>

                        <el-table-column label="单价(含税)" align="left" prop="price" width="120" >
                          <template slot-scope="scope">
                            {{scope.row.price}}
                          </template>
                        </el-table-column>
                        <el-table-column label="金额(含税)" align="left" prop="amount" width="140">
                          <template slot-scope="scope">
                            {{scope.row.amount}}
                          </template>
                        </el-table-column>

                        <el-table-column label="税率" align="left" prop="taxRate"  width="100">
                          <template slot-scope="scope">
                            {{scope.row.taxRate}}
                          </template>
                        </el-table-column>
                        <el-table-column label="税额" align="left" prop="tax"  width="150">
                          <template slot-scope="scope">
                            {{scope.row.tax | formatCurrency}}
                          </template>
                        </el-table-column>

                        <div slot="empty">
                          <svg-icon icon-class="search-none" style="font-size: 64px;" />
                          <p>暂无数据</p>
                        </div>
                      </el-table>
                    </div>
                    <div class="total-line-amount">
                      <div class="first">合计</div>
                      <div class="second">
                        <div><span>税额</span></div>
                        <div>￥{{detailForm.tax | formatCurrency}}</div>
                      </div>
                      <div class="third" ><div><span>金额(不含税)</span></div><div>￥{{detailForm.feeWithoutTax | formatCurrency}} </div></div>
                    </div>

                    <div class="total-line">
                      <div class="first" >价税合计（大写）</div>
                      <div class="second">
                        <span style="padding: 4px 11px;">{{chineseFee}}</span>
                      </div>
                      <div class="third"><div><span>(小写)</span></div>
                        <div>
                          ￥{{detailForm.fee | formatCurrency}}
                        </div>
                      </div>
                    </div>

                    <div class="purchase">
                      <div class="first" >开具推送</div>
                      <div class="second" >
                        <div class="inner" >手机号码</div>
                        <div class="inner" >客户邮箱</div>
                        <div class="inner" style="height: 72px;line-height: 72px; border-bottom: 0;">抄送邮箱</div>
                      </div>
                      <div class="third">
                        <div class="inner">
                          {{detailForm.collectMobile}}
                        </div>
                        <div class="inner">
                          {{detailForm.collectMail}}
                        </div>
                        <div class="inner" style="height: 72px;line-height: 72px; border-bottom: 0;">
                      <textarea readonly rows="2" placeholder="多个邮箱地址可使用逗号或分号隔开，最大可允许维护5个邮箱地址" v-model="detailForm.emailCarbonCopy"
                                class="ant-input invoice-remarks-textArea"
                                style="flex: 1 1 0%; height: 72px; resize: none; width: 100%;">
                      </textarea>
                        </div>
                      </div>
                      <div class="fourth">备注</div>
                      <div class="fifth" style="background: rgb(255, 255, 255);">
                        <div class="inner difference-box" style="display: flex; flex-direction: column;">
                      <textarea readonly rows="4" placeholder="请输入发票备注" v-model="detailForm.invoiceRemark"
                                class="ant-input invoice-remarks-textArea"
                                style="flex: 1 1 0%; height: 30px; max-height: 9.0072e+15px; resize: none;">
                      </textarea>
                        </div></div>
                    </div>
                    <div class="person-info" style="display: grid; grid-template-columns: 6.11111% 27.2222% 6.11111% 25.7333% 6.11111% 27.2222%;">
                      <div class="inner">开票人：</div>
                      <div class="inner" style="text-align: left;">
                        {{detailForm.invoiceName}}
                      </div>
                      <div class="inner">收款人：</div>
                      <div class="inner" style="text-align: left;">
                        {{detailForm.collectName}}
                      </div>
                      <div class="inner">复核人：</div>
                      <div class="inner" style="text-align: left;">
                        {{detailForm.reviewName}}
                      </div>
                    </div>
                  </div>
                </el-row>
              </el-form>
            </el-col>
            <el-col :span="1">
              <div class="pages-account-output-invoice-style-cube-list" style="right: 13px; left: unset;">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
              </div>
            </el-col>
          </el-row>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" type="primary" @click="handleIssue">确 定</el-button>
          <el-button size="mini"   @click="handleInvoiceIssueCancel">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 查询条件-公司-弹出查询 -->
      <el-dialog v-dialogDrag  :close-on-click-modal="false" title="查询条件-公司查询" :visible.sync="searchsiteCodeDialogOpen" width="800px" append-to-body>
        <div class="dialog_box" style="height:550px;">
          <el-form label-position="left" :model="searchsiteCodeQueryParams" :inline="true"  ref="searchsiteCodeQueryForm" label-width="88px" >
            <el-form-item  prop="searchsiteCodeSearchValue">
              <el-input
                v-model="searchsiteCodeQueryParams.searchValue"
                size="mini"
                placeholder="请输入编码或名称查询公司"
                @keyup.enter.native="handleSearchsiteCodeQuery"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchsiteCodeQuery">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table v-loading="searchsiteCodeSelectLoading" :data="searchsiteCodeList"
                    height="400"
                    @row-click="handleSearchsiteCodeRowClick"
                    ref="searchsiteCodeMultipleTable"
                    :row-key="getSearchsiteCodeListRowKey"
                    :row-style="{height:2+'px'}"
                    :header-cell-style= "{
                        'font-size': '14px !important',
                        'font-weight': '500 !important',
                        'background-color':'rgb(241 241 241 / 52%)'
                      }"
                    :cell-style="{padding:'2px 4px'}"
                    border
                    @selection-change="handleSearchsiteCodeSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <!-- 数据 -->
            <el-table-column prop="companycode" label="公司代码" width="180"></el-table-column>
            <el-table-column prop="companyname" label="公司名称" ></el-table-column>
            <el-table-column prop="remark" label="备注" width="120"></el-table-column>
          </el-table>
          <pagination
            v-show="searchsiteCodeTotal>0"
            :total="searchsiteCodeTotal"
            :page.sync="searchsiteCodeQueryParams.pageNum"
            :limit.sync="searchsiteCodeQueryParams.pageSize"
            @pagination="getSearchsiteCodeList"
          />
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" type="primary" @click="confirmSearchsiteCode">确 定</el-button>
          <el-button size="mini"   @click="searchsiteCodeCancel">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 编辑-公司-弹出查询 -->
      <el-dialog v-dialogDrag  :close-on-click-modal="false" title="编辑销项发票-公司选择" :visible.sync="siteCodeDialogOpen" width="800px" append-to-body>
        <div class="dialog_box" style="height:550px;">
          <el-form label-position="left" :model="siteCodeQueryParams" :inline="true"  ref="siteCodeQueryForm" label-width="88px" >
            <el-form-item  prop="siteCodeSearchValue">
              <el-input
                v-model="siteCodeQueryParams.searchValue"
                size="mini"
                placeholder="请输入编码或名称查询公司"
                @keyup.enter.native="handlesiteCodeQuery"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handlesiteCodeQuery">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table v-loading="siteCodeSelectLoading" :data="siteCodeList"
                    height="400"
                    @row-click="handlesiteCodeRowClick"
                    ref="siteCodeSingleTable"
                    :row-key="getsiteCodeListRowKey"
                    :row-style="{height:2+'px'}"
                    :header-cell-style= "{
                        'font-size': '14px !important',
                        'font-weight': '500 !important',
                        'background-color':'rgb(241 241 241 / 52%)'
                      }"
                    :cell-style="{padding:'2px 4px'}"
                    border
                    @selection-change="handlesiteCodeSelectionChange">
            <el-table-column label="选择" width="60">
              　　　　<template slot-scope="scope">
              　　　　　　<el-radio v-model="siteCodeDialogRadio" :label="scope.row"><i></i></el-radio>
              　　　　</template>
              　　 </el-table-column>
            <!-- 数据 -->
            <el-table-column prop="companycode" label="公司代码" width="180"></el-table-column>
            <el-table-column prop="companyname" label="公司名称" ></el-table-column>
            <el-table-column prop="remark" label="备注" width="120"></el-table-column>
          </el-table>
          <pagination
            v-show="siteCodeTotal>0"
            :total="siteCodeTotal"
            :page.sync="siteCodeQueryParams.pageNum"
            :limit.sync="siteCodeQueryParams.pageSize"
            @pagination="getsiteCodeList"
          />
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" type="primary" @click="confirmsiteCode">确 定</el-button>
          <el-button size="mini" @click="siteCodeCancel">取 消</el-button>
        </div>
      </el-dialog>


    </el-card>
  </div>
</template>

<style lang="scss">
  .v-deep{
    .el-collapse-item__arrow {
      width: 40px;
    }
    .el-icon-arrow-right:before {
      content: "展开";
      font-size: 14px;
      font-family: 'heiti';
      color: #2295ff;
    }
    .el-collapse-item__arrow.is-active {
      transform: none;
    }
    .el-collapse-item__arrow.is-active::before {
      content: "收起";
      font-size: 14px;
      font-family: 'heiti';
      color: #2295ff;
    }
    .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
      margin-bottom: 8px;
    }
  }

  .el-descriptions__header{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 5px !important;
    margin-top: 5px;
  }
  .el-descriptions__title::before{
    content: "";
    display: block;
    width: 3px;
    height: 20px;
    position: absolute;
    background-color: #297cf0;
    left: 0px;
    margin-top: 11px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .invoice-type {
    font-size: 12px;
    font-weight: 500;
    border: 2px solid;
    padding: 2px 6px;
    color: hsl(158deg 86% 34%);
    border-radius: 4px;
  }
  .invoice-type::before,
  .invoice-type::after {
    position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    background-color: #fff;
    border: 2px solid hsl(158deg 86% 34%);
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    margin-top: 10px;
  }

  .invoice-type::before {
    margin-left: -10px;
    transform: rotate(45deg);
  }

  .invoice-type::after {
    margin-left: 3px;
    transform: rotate(-135deg);
  }

  // 发票样式
  .pages-account-output-invoice-style-title {
    font-size: 26px;
    font-family: STKaitiSC-Black, STKaitiSC;
    font-weight: 500;
    color: #b76440;
    text-align: center;
    letter-spacing: 15px;
    margin-bottom: 8px;
  }

  .invoice-opening-tale {
    border: 1px solid #b76440;
    overflow: hidden;
    color: #3c3c3c;
    background: rgba(255, 249, 245, .55);
  }
  .invoice-opening-tale .purchase {
    overflow: hidden;
    font-size: 14px;
    border-bottom: 1px solid #b76440;
  }
  .invoice-opening-tale .purchase .first {
    width: 6.13%;
    height: 144px;
    line-height: 144px;
    text-align: center;
    color: #b76440;
    font-family: PingFangSC-Regular, PingFang SC;
  }

  .invoice-opening-tale .purchase>div .inner {
    border-bottom: 1px solid #b76440;
    height: 36px;
    line-height: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #b76440;
    font-family: PingFangSC-Regular, PingFang SC;
  }

  .invoice-opening-tale .purchase .second {
    width: 9.9%;
  }
  .invoice-opening-tale .purchase .second .inner {
    padding: 0 11px;
  }
  .invoice-opening-tale .purchase>div.second .inner {
    border-bottom: 1px solid #b76440;
    text-align: justify;
    /*text-align-last: justify;*/
    text-justify: distribute-all-lines;
  }

  .invoice-opening-tale .purchase .third {
    width: 33.9%;
  }
  .invoice-opening-tale .purchase>div {
    border-right: 1px solid #b76440;
    float: left;
    overflow: hidden;
  }
  .invoice-opening-tale .purchase .fourth {
    width: 6.13%;
    height: 144px;
    line-height: 144px;
    text-align: center;
    color: #b76440;
    font-family: PingFangSC-Regular, PingFang SC;
  }
  .invoice-opening-tale .purchase>div:last-child {
    border-right: 0 solid #d9d9d9;
  }
  .invoice-opening-tale .purchase .fifth {
    background: #f9f9f9;
    width: 43.8%;
    height: 144px;
  }
  .invoice-opening-tale .purchase .fifth .fifth-inner {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 144px;
    font-size: 16px;
    color: #afaeae;
    background: linear-gradient(to top right, rgba(255, 249, 245, .55) 0, rgba(255, 249, 245, .55) calc(50% - 1px), #efefef 50%, rgba(255, 249, 245, .55) calc(50% + 1px), rgba(255, 249, 245, .55)), linear-gradient(to bottom right, rgba(255, 249, 245, .55) 0, rgba(255, 249, 245, .55) calc(50% - 1px), #efefef 50%, rgba(255, 249, 245, .55) calc(50% + 1px), rgba(255, 249, 245, .55));
  }

  .pages-account-output-invoice-style-cube-list {
    width: 20px;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    position: absolute;
    left: 13px;
    top: 0;
  }
  .pages-account-output-invoice-style-cube-list>span {
    display: block;
    width: 20px;
    height: 20px;
    background: #e7f0fc;
    border-radius: 50%;
  }

  .full-screen {
    border: 2px solid #b76440;
    padding: 10px;
    position: fixed;
    top: 10%;
    left: 15%;
    width: 80vw;
    height: 83vh;
    z-index: 10000;
    background-color: white;
    overflow: auto;
    box-shadow: 3px 3px 2px rgba(0,0,0,0.5);
  }

  .full-screen .el-table {
    width: 100%;
    height: calc(100% - 40px); /* 假设按钮高度是40px */
  }

  .invoice-opening-tale .goods {
    border-bottom: 1px solid #b76440;
    transform: scale(1);
  }


  .invoice-opening-tale .total-line-amount {
    height: 36px;
    line-height: 36px;
    font-size: 13px;
    border-bottom: 1px solid #b76440;
  }
  .invoice-opening-tale .total-line-amount .first {
    width: 14.7%;
    text-align: center;
    color: #b76440;
    font-family: PingFangSC-Regular, PingFang SC;
    font-size: 14px;
  }
  .invoice-opening-tale .total-line-amount>div {
    border-right: 1px solid #b76440;
    float: left;
  }
  .invoice-opening-tale .total-line-amount .second {
    float: right;
    width: 250px;
    border-right: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .invoice-opening-tale .total-line-amount .second>div:first-child {
    width: 20%;
    text-align: center;
    color: #b76440;
    font-family: PingFangSC-Regular, PingFang SC;
    font-size: 14px;
  }
  .invoice-opening-tale .total-line-amount .second>div:nth-child(2) {
    width: 80%;
  }
  .invoice-opening-tale .total-line-amount>div:last-child {
    border-right: 0 solid #b76440;
  }
  .invoice-opening-tale .total-line-amount .third {
    float: right;
    width: 300px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .invoice-opening-tale .total-line-amount .third>div:first-child {
    width: 34%;
    text-align: center;
    color: #b76440;
    font-family: PingFangSC-Regular, PingFang SC;
    font-size: 14px;
  }
  .invoice-opening-tale .total-line-amount .third>div:nth-child(2) {
    width: 66%;
  }
  .invoice-opening-tale .total-line {
    height: 36px;
    line-height: 36px;
    font-size: 13px;
    border-bottom: 1px solid #b76440;
  }
  .invoice-opening-tale .total-line .first {
    width: 14.7%;
    text-align: center;
    color: #b76440;
    font-family: PingFangSC-Regular, PingFang SC;
    font-size: 14px;
  }
  .invoice-opening-tale .total-line .second {
    width: 50.5%;
  }
  .invoice-opening-tale .total-line>div {
    border-right: 1px solid #b76440;
    float: left;
  }
  .invoice-opening-tale .total-line>div:last-child {
    border-right: 0 solid #b76440;
  }
  .invoice-opening-tale .total-line .third {
    width: 34.71%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .invoice-opening-tale .total-line>div {
    border-right: 1px solid #b76440;
    float: left;
  }
  .invoice-opening-tale .total-line .third>div:first-child {
    width: 30%;
    text-align: center;
    color: #b76440;
    font-family: PingFangSC-Regular, PingFang SC;
    font-size: 14px;
  }
  .invoice-opening-tale .total-line .third>div:nth-child(2) {
    width: 70%;
  }
  .invoice-opening-tale .purchase>div:last-child {
    border-right: 0 solid #d9d9d9;
  }
  .invoice-opening-tale .purchase>div {
    border-right: 1px solid #b76440;
    float: left;
    overflow: hidden;
  }
  .invoice-opening-tale .purchase>div .inner .ant-input {
    border: 0 solid #b76440;
    height: 30px;
    font-size: 14px;
    color: #3c3c3c;
    outline: none;
    box-shadow: none;
    font-family: "SimSun";
  }
  textarea.ant-input {
    max-width: 100%;
    height: auto;
    min-height: 32px;
    line-height: 1.5715;
    vertical-align: bottom;
    transition: all .3s, height 0s;
  }
  .person-info{
  }
  .invoice-opening-tale .person-info .inner {
    line-height: 36px;
    text-align: center;
    color: #b76440;
    font-family: PingFangSC-Regular, PingFang SC;
    font-size: 14px;
  }
  .invoice-opening-tale .purchase .fifth .inner {
    height: 145px;
  }
</style>

<script>
    import { listInvoice, getInvoice, delInvoice, addInvoice, updateInvoice, issueInvoice } from "@/api/doc/invoice";
    import { listCompany as listcompany, getCompany as getcompany } from "@/api/core/company";
    /* 城市列表 **/
    import { provinceList, cityList, districtList } from "@/api/system/city";

    export default {
        name: "InvoiceTobe",
        dicts: ['check_status', 'process_status', 'invoice_status', 'invoice_type', 'match_status', 'account_status', 'sign_status', 'submit_status', 'collect_status'],
        data() {
            return {
                advanced: false,
                tableHeight: this.getInitTableHeight(),
                // 遮罩层
                loading: true,
                // 远程查询条件加载
                remoteSearchValueLoading: false,
                // 选中数组
                ids: [],
                // 子表选中数据
                checkedTSalInvoiceEntry: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                tableKey: 19,
                //
                columnsKey: 'salinvoice',
                // 自定义列
                columns: [
                    // {
                    //     key: 0,
                    //     label: `公司`,
                    //     visible: true
                    // },
                    {
                        key: 1,
                        label: `发票类型`,
                        visible: true
                    },
                    {
                        key: 2,
                        label: `ERP发票号`,
                        visible: true
                    },
                    {
                        key: 3,
                        label: `开票号码`,
                        visible: true
                    },
                    {
                        key: 4,
                        label: `处理状态`,
                        visible: true
                    },
                    {
                        key: 5,
                        label: `购方名称`,
                        visible: true
                    },
                    {
                        key: 6,
                        label: `金额(含税)`,
                        visible: true
                    },
                    {
                        key: 7,
                        label: `金额(不含税)`,
                        visible: true
                    },
                    {
                        key: 8,
                        label: `税额`,
                        visible: true
                    },
                    {
                        key: 9,
                        label: `销方名称`,
                        visible: true
                    },
                    {
                        key: 10,
                        label: `备注`,
                        visible: true
                    },
                    {
                        key: 11,
                        label: `ERP发票流水号`,
                        visible: true
                    },
                    {
                        key: 12,
                        label: `添加人`,
                        visible: true
                    },
                    {
                        key: 13,
                        label: `添加时间`,
                        visible: true
                    },
                    {
                        key: 14,
                        label: `修改人`,
                        visible: true
                    },
                    {
                        key: 15,
                        label: `修改时间`,
                        visible: true
                    }
                ],
                // 总条数
                total: 0,
                // 销项发票表格数据
                invoiceList: [],
                // 销项明细项表格数据
                tSalInvoiceEntryList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 修改时间时间范围
                daterangeInvoiceDate: [],
                // 修改时间时间范围
                daterangeAccountDate: [],
                // 修改时间时间范围
                daterangeCreateTime: [],

                // 关键字查询条件
                searchValueOptions:[

                ],

                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    params:{

                    },
                    searchValues: [],
                    siteCode: null,
                    invoiceType: null,
                    invoiceTypes: [],
                    invoiceNo: null,
                    invoiceCode: null,
                    invoiceDate: null,
                    printNumber: null,
                    sellerName: null,
                    sellerNumber: null,
                    buyerNumber: null,
                    buyerTel: null,
                    buyerAccount: null,
                    voucherNumber: null,
                    accountDate: null,
                    processStatus: null,
                    processStatuses: [],
                    invoiceStatus: null,
                    invoiceStatuses: [],
                    checkStatus: null,
                    checkStatuses: [],
                    collectStatus: null,
                    collectStatuses: [],
                    signStatus: null,
                    signStatuses: [],
                    matchStatus: null,
                    matchStatuses: [],
                    submitStatus: null,
                    submitStatuses: [],
                    checkCode: null,
                    erpSerialNumber: null,
                    updateBy: null,
                    updateTime: null
                },

                checkAllInvoiceType: false,
                isInvoiceTypeIndeterminate: false,
                checkAllInvoiceStatus: false,
                isInvoiceStatusIndeterminate: false,
                checkAllProcessStatus: false,
                isProcessStatusIndeterminate: false,
                checkAllCheckStatus: false,
                isCheckStatusIndeterminate: false,
                checkAllCollectStatus: false,
                isCollectStatusIndeterminate: false,
                checkAllSignStatus: false,
                isSignStatusIndeterminate: false,
                checkAllMatchStatus: false,
                isMatchStatusIndeterminate: false,
                checkAllSubmitStatus: false,
                isSubmitStatusIndeterminate: false,

                // 表单参数
                form: {},

                // 表单校验
                rules: {
                },

                invoiceOpen:false,
                images:['http://localhost:8080/profile/yangzhang/yangzhang.png'],

                // 预览
                invoicePreviewOpen:false,
                detailForm: {},
                invoiceEntryList :[],
                isFullScreen: false,
                chineseFee : '',

                /* ======================================省市区======================================  */
                // 省
                provinceId: null,
                provinceList:[],
                // 市
                cityId: null,
                cityList:[],
                // 区
                districtId: null,
                districtList:[],

                /* ======================================查询条件-公司代码选择======================================  */
                searchsiteCodes:[],
                searchsiteCodenames:[],
                searchsiteCodeTotal: 0,
                searchsiteCodeList: [],
                searchsiteCodeDialogOpen: false,
                searchsiteCodeSelectLoading: false,
                searchsiteCodeQueryParams: {
                    searchValue: null,
                    pageNum: 1,
                    pageSize: 20,
                },
                /* ======================================编辑-公司代码选择======================================  */
                siteCodename: null,
                siteCodeTotal: 0,
                siteCodeList: [],
                siteCodeDialogRadio: null,
                siteCodeDialogOpen: false,
                siteCodeSelectLoading: false,
                siteCodeQueryParams: {
                    searchValue: null,
                    pageNum: 1,
                    pageSize: 20,
                },
            };
        },
        created() {
            this.getList();
        },
        methods: {
            /** 行样式 */
            rowClass({ row, rowIndex }) {
                if (this.ids.includes(row.id)) {
                    return { background: "#d9edf7", height:'20px' };
                } else {
                    return { height:'20px'};
                }
            },
            /** 隐藏搜索按钮操作 */
            showSearchFun(isShowSearch){
                this.showSearch = isShowSearch
                let oldHeight = this.$refs.queryRef.$el.offsetHeight
                if(!isShowSearch){
                    //当前是显示状态
                    oldHeight = oldHeight + 12
                }else{
                    oldHeight = oldHeight - 12
                }
                this.$nextTick(() => (
                    this.tableHeight = this.$refs.tableRef.$el.offsetHeight - (this.$refs.queryRef.$el.offsetHeight-oldHeight)
                ))
            },
            /** 展开按钮操作 */
            toggleAdvanced() {
                const oldHeight = this.$refs.queryRef.$el.offsetHeight
                this.advanced = !this.advanced
                this.$nextTick(() => (
                    this.tableHeight = this.$refs.tableRef.$el.offsetHeight - (this.$refs.queryRef.$el.offsetHeight-oldHeight)
                ))
            },
            /** 查询销项发票列表 */
            getList() {
                this.loading = true;
                this.queryParams.params = {};
                if (null != this.daterangeInvoiceDate && '' != this.daterangeInvoiceDate) {
                    this.queryParams.params["beginInvoiceDate"] = this.daterangeInvoiceDate[0];
                    this.queryParams.params["endInvoiceDate"] = this.daterangeInvoiceDate[1];
                } else {
                    this.queryParams.params["beginInvoiceDate"] = null;
                    this.queryParams.params["endInvoiceDate"] = null;
                }
                if (null != this.daterangeAccountDate && '' != this.daterangeAccountDate) {
                    this.queryParams.params["beginAccountDate"] = this.daterangeAccountDate[0];
                    this.queryParams.params["endAccountDate"] = this.daterangeAccountDate[1];
                } else {
                    this.queryParams.params["beginAccountDate"] = null;
                    this.queryParams.params["beginAccountDate"] = null;
                }
                if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
                    this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
                    this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
                } else {
                    this.queryParams.params["beginCreateTime"] = null;
                    this.queryParams.params["beginCreateTime"] = null;
                }
                if(this.queryParams.processStatuses.length > 0){
                    this.queryParams.params["processStatuses"] = this.queryParams.processStatuses.join(',');
                } else {
                    this.queryParams.params["processStatuses"] = null;
                }
                if(this.queryParams.invoiceTypes.length > 0){
                    this.queryParams.params["invoiceTypes"] = this.queryParams.invoiceTypes.join(',');
                } else {
                    this.queryParams.params["invoiceTypes"] = null;
                }
                this.queryParams.params["searchType"] = 'tobe';
                listInvoice(this.queryParams).then(response => {
                    this.invoiceList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    id: null,
                    invoiceId: null,
                    custId: null,
                    siteCode: null,
                    siteName: null,
                    invoiceType: null,
                    invoiceTypeName: null,
                    invoiceNo: null,
                    invoiceCode: null,
                    invoiceDate: null,
                    printNumber: null,
                    feeWithoutTax: null,
                    fee: null,
                    tax: null,
                    sellerName: null,
                    sellerNumber: null,
                    sellerDest: null,
                    sellerAddress: null,
                    sellerTel: null,
                    sellerBank: null,
                    sellerAccount: null,
                    buyerName: null,
                    buyerNumber: null,
                    buyerAddress: null,
                    buyerTel: null,
                    buyerBank: null,
                    buyerAccount: null,
                    voucherNumber: null,
                    accountDate: null,
                    accountStatus: null,
                    accountStatusName: null,
                    processStatus: null,
                    processStatusName: null,
                    invoiceStatus: null,
                    invoiceStatusName: null,
                    checkStatus: null,
                    checkStatusName: null,
                    collectStatus: null,
                    collectStatusName: null,
                    signStatus: null,
                    signStatusName: null,
                    matchStatus: null,
                    matchStatusName: null,
                    submitStatus: null,
                    submitStatusName: null,
                    checkCode: null,
                    invoiceRemark: null,
                    erpSerialNumber: null,
                    createName: null,
                    createTime: null,
                    updateBy: null,
                    updateTime: null
                };
                this.tSalInvoiceEntryList = [];
                this.resetForm("form");
            },


            /* ※※ 查询 省市区 相关方法 start ※※ */
            // 获取省
            getProvinceList(){
                provinceList().then(response => {
                    this.provinceList = response.data;
                });
            },
            // 获取市
            getCityList(){
                console.log(this.provinceId);
                cityList( {"parentId" : this.provinceId } ).then(response => {
                    this.cityList = response.data;
                });
            },
            // 获取区县
            getDistrictList(){
                districtList( {"parentId" : this.cityId } ).then(response => {
                    this.districtList = response.data;
                });
            },
            // 选中省份
            handleChangeProvince(val){
                // 给表单省字段赋值
                this.form.provinceid = val;
                let province = {};
                province = this.provinceList.find((item)=>{
                    return item.id === val;
                });
                this.form.province = province.name;
                // 城市数据清空、区县数据清空;
                this.cityList = [];
                this.districtList = [];
                // 已选市、区数据清空
                this.cityId = null;
                this.districtId = null;
                // 表单城市、区县数据清空
                this.form.cityid = null;
                this.form.city = null;
                this.form.areaid = null;
                this.form.area = null;
                // 获取城市数据
                this.getCityList();
            },
            // 清空省份
            handleClearProvince(){
                // 城市数据清空、区县数据清空;
                this.cityList = [];
                this.districtList = [];
                // 已选市、区数据清空
                this.cityId = null;
                this.districtId = null;
                // 表单城市、区县数据清空
                this.form.cityid = null;
                this.form.city = null;
                this.form.areaid = null;
                this.form.area = null;
            },
            // 选中城市
            handleChangeCity(val){
                // 给表单市字段赋值
                this.form.cityid = val;
                let city = {};
                city = this.cityList.find((item)=>{
                    return item.id === val;
                });
                this.form.city = city.name;
                // 区县数据清空
                this.districtList = [];
                // 已选区县清空
                this.districtId = null;
                // 表单区县清空
                this.form.areaid = null;
                this.form.area = null;
                // 获取城市数据
                this.getDistrictList();
            },
            // 清空省份
            handleClearCity(){
                // 区县数据清空
                this.districtList = [];
                // 已选区县清空
                this.districtId = null;
                // 表单区县清空
                this.form.areaid = null;
                this.form.area = null;
            },
            // 选中区县
            handleChangeDistrict(val){
                // 给表单省字段赋值
                this.form.areaid = val;
                let district = {};
                district = this.districtList.find((item)=>{
                    return item.id === val;
                });
                this.form.area = district.name;
            },
            // 清空省份
            handleClearDistrict(){
                // 表单区县清空
                this.form.areaid = null;
                this.form.area = null;
            },

            /* ※※ 查询 省市区 相关方法 end ※※ */




            /* ※※ 查询 公司代码 相关方法 start ※※ */
            /** ① 弹出查询条件-公司代码 */
            openSearchsiteCodeDialogOpen(){
                this.searchsiteCodeDialogOpen = true;
                // 默认不查询
            },
            /** ② 单击行 **/
            handleSearchsiteCodeRowClick(row, column, event){
                this.$refs.searchsiteCodeSingleTable.toggleRowSelection(row);
            },
            /** ③ 行KEY **/
            getSearchsiteCodeListRowKey(row) {
                return row.companycode
            },
            /** ④ 选中公司代码 **/
            handleSearchsiteCodeSelectionChange(selection) {
                this.searchsiteCodes = selection.map(item => item.siteCode);
                this.searchsiteCodenames = selection.map(item => item.siteName);
            },
            /** ⑤ 点击查询按钮 **/
            handleSearchsiteCodeQuery(){
                this.searchsiteCodeQueryParams.pageNum = 1;
                this.getSearchsiteCodeList();
            },
            /** ⑥ 查询 **/
            getSearchsiteCodeList(){
                this.searchsiteCodeSelectLoading = true;
                listcompany(this.searchsiteCodeQueryParams).then(response => {
                    this.searchsiteCodeList = response.rows;
                    this.searchsiteCodeTotal = response.total;
                    this.searchsiteCodeSelectLoading = false;
                });
            },
            /** ⑦ 点击确认查询 **/
            confirmSearchsiteCode() {
                if(this.searchsiteCodes.length > 0){
                    this.queryParams.params.siteCodes = this.searchsiteCodes.join(',');
                    this.queryParams.params.companynames = this.searchsiteCodenames.join(',');
                }
                // 关闭查询弹出框
                this.searchsiteCodeCancel();
            },
            /** ⑧ 点击关闭查询弹出框 **/
            searchsiteCodeCancel() {
                this.searchsiteCodeDialogOpen = false;
            },
            /* ※※ 查询 公司代码 相关方法 end ※※ */


            /* ※※ 编辑 公司代码 相关方法 start ※※ */
            /** ① 弹出编辑内容-公司代码 */
            opensiteCodeDialogOpen(){
                this.siteCodeDialogOpen = true;
                this.getsiteCodeList();
            },
            /** ② 单击行 **/
            handlesiteCodeRowClick(row, column, event){
                this.$refs.siteCodeSingleTable.toggleRowSelection(row);
            },
            /** ③ 行KEY **/
            getsiteCodeListRowKey(row) {
                return row.companycode
            },
            /** ④ 选中公司代码 **/
            handlesiteCodeSelectionChange(selection) {
                if (selection[0]) {
                    this.siteCodeDialogRadio = selection[0]
                    this.form.companycode = selection[0].companycode;
                    this.form.companyname = selection[0].companyname;
                }
            },
            /** ⑤ 点击查询按钮 **/
            handlesiteCodeQuery(){
                this.siteCodeQueryParams.pageNum = 1;
                this.getsiteCodeList();
            },
            /** ⑥ 查询 **/
            getsiteCodeList(){
                this.siteCodeSelectLoading = true;
                listcompany(this.siteCodeQueryParams).then(response => {
                    this.siteCodeList = response.rows;
                    this.siteCodeTotal = response.total;
                    this.siteCodeSelectLoading = false;
                });
            },
            /** ⑦ 点击确认查询 **/
            confirmsiteCode() {
                this.siteCodeCancel();
            },
            /** ⑧ 点击关闭查询弹出框 **/
            siteCodeCancel() {
                this.siteCodeDialogOpen = false;
            },
            /* ※※ 编辑 公司代码 相关方法 end ※※ */

            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                console.log("this.queryParams:");
                console.log(this.queryParams);
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.daterangeInvoiceDate = [];
                this.daterangeAccountDate = [];
                this.daterangeCreateTime = [];
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length!==1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加销项发票";
            },
            /** 跳转至详情页 */
            jumpToDetail(row){
                const invoiceId = row.id;
                const invoiceNo = row.invoiceNo;
                // 需要另新增一个标签页
                this.$router.push({path:'/doc/dealInvoice/tobe/detail/' + invoiceId,query:{invoiceId:invoiceId, invoiceNo:invoiceNo, date:new Date().getTime()}})
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                const invoiceId = row.id;
                const invoiceNo = row.invoiceNo;
                // 需要另新增一个标签页
                this.$router.push({path:'/doc/dealInvoice/tobe/update/' + invoiceId,query:{invoiceId:invoiceId, invoiceNo:invoiceNo, date:new Date().getTime()}})

            },
            showYangZhang() {
                this.invoiceOpen = true;
                // TODO 获取附件

            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        this.form.tSalInvoiceEntryList = this.tSalInvoiceEntryList;
                        if (this.form.id != null) {
                            updateInvoice(this.form).then(response => {
                                this.$modal.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            addInvoice(this.form).then(response => {
                                this.$modal.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                this.$modal.confirm('是否确认删除？').then(function() {
                    return delInvoice(ids);
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {});
            },
            /** 开票按钮操作 */
            handleIssuePreview() {
                const id = this.ids;
                getInvoice(id).then(response => {
                    this.detailForm = response.data;
                    this.invoiceEntryList = response.data.tsalInvoiceEntryList;
                    this.chineseFee = this.menoyToUppercase(this.detailForm.fee);

                    // 弹出预览
                    this.invoicePreviewOpen = true;
                });

            },
            /** 开票按钮操作 */
            handleInvoiceIssueCancel() {
                this.detailForm = {};
                this.invoiceEntryList = [];
                this.chineseFee = "";
                // 弹出预览
                this.invoicePreviewOpen = false;
            },
            /** 开票确认操作 */
            handleIssue(row) {
                const ids = row.id || this.ids;
                this.$modal.confirm('是否确认开票？').then(function() {
                    return issueInvoice(ids);
                }).then(() => {
                    // 弹出预览
                    this.handleInvoiceIssueCancel();
                    this.getList();
                    this.$modal.msgSuccess("操作成功");
                }).catch(() => {

                });
            },
            /** 销项明细项序号 */
            rowTSalInvoiceEntryIndex({ row, rowIndex }) {
                row.index = rowIndex + 1;
            },
            /** 销项明细项添加按钮操作 */
            handleAddTSalInvoiceEntry() {
                let obj = {};
                obj.entryId = "";
                obj.custId = "";
                obj.siteCode = "";
                obj.siteName = "";
                obj.itemName = "";
                obj.invoiceCode = "";
                obj.unit = "";
                obj.qty = "";
                obj.withoutPrice = "";
                obj.withoutAmount = "";
                obj.taxRate = "";
                obj.tax = "";
                obj.price = "";
                obj.amount = "";
                obj.createName = "";
                obj.updateBy = "";
                obj.updateTime = "";
                this.tSalInvoiceEntryList.push(obj);
            },
            /** 销项明细项删除按钮操作 */
            handleDeleteTSalInvoiceEntry() {
                if (this.checkedTSalInvoiceEntry.length == 0) {
                    this.$modal.msgError("请先选择要删除的销项明细项数据");
                } else {
                    const tSalInvoiceEntryList = this.tSalInvoiceEntryList;
                    const checkedTSalInvoiceEntry = this.checkedTSalInvoiceEntry;
                    this.tSalInvoiceEntryList = tSalInvoiceEntryList.filter(function(item) {
                        return checkedTSalInvoiceEntry.indexOf(item.index) == -1
                    });
                }
            },
            /** 复选框选中数据 */
            handleTSalInvoiceEntrySelectionChange(selection) {
                this.checkedTSalInvoiceEntry = selection.map(item => item.index)
            },
            /** 导出按钮操作 */
            handleExport() {
                this.download('doc/invoice/export', {
                    ...this.queryParams
                }, `invoice_${new Date().getTime()}.xlsx`)
            },
            /** 动态加载关键字查询条件 */
            remoteSearchValue(query) {
                this.remoteSearchValueLoading = true;
                if (query !== '') {
                    this.searchValueOptions = [
                        {value: '购方名称:' + query ,label: '购方名称:' + query },
                        {value: 'ERP发票号:' + query ,label: 'ERP发票号:' + query },
                        {value: '开票号码:' + query ,label: '开票号码:' + query },
                        // {value: '合并标识码:' + query ,label: '合并标识码:' + query }
                    ];
                    this.searchValueOptions.map(item => {
                        this.queryParams.searchValues.map((item2, index) => {
                            if(item.value.startsWith('购方名称') && item2.startsWith('购方名称')){
                                item.disabled = true;
                            }
                            if(item.value.startsWith('ERP发票号') && item2.startsWith('ERP发票号')){
                                item.disabled = true;
                            }
                            if(item.value.startsWith('开票号码') && item2.startsWith('开票号码')){
                                item.disabled = true;
                            }
                        })
                    });
                } else {
                    this.searchValueOptions = [];
                }
                this.remoteSearchValueLoading = false;
            },

            checkAll(val, column){
                if(val){
                    switch (column) {
                        case 'invoiceType':
                            this.dict.type.invoice_type.map((dict, index) => {
                                this.queryParams.invoiceTypes.push(dict.value)
                            });
                            break;
                        case 'accountStatus':
                            this.dict.type.account_status.map((dict, index) => {
                                this.queryParams.accountStatuses.push(dict.value)
                            });
                            break;
                        case 'processStatus':
                            this.dict.type.process_status.map((dict, index) => {
                                this.queryParams.processStatuses.push(dict.value)
                            });
                            break;
                        case 'invoiceStatus':
                            this.dict.type.invoice_status.map((dict, index) => {
                                this.queryParams.invoiceStatuses.push(dict.value)
                            });
                            break;
                        case 'checkStatus':
                            this.dict.type.check_status.map((dict, index) => {
                                this.queryParams.checkStatuses.push(dict.value)
                            });
                            break;
                        case 'collectStatus':
                            this.dict.type.collect_status.map((dict, index) => {
                                this.queryParams.collectStatuses.push(dict.value)
                            });
                            break;
                        case 'signStatus':
                            this.dict.type.sign_status.map((dict, index) => {
                                this.queryParams.signStatuses.push(dict.value)
                            });
                            break;
                        case 'matchStatus':
                            this.dict.type.match_status.map((dict, index) => {
                                this.queryParams.matchStatuses.push(dict.value)
                            });
                            break;
                        case 'submitStatus':
                            this.dict.type.submit_status.map((dict, index) => {
                                this.queryParams.submitStatuses.push(dict.value)
                            });
                            break;
                    }

                } else {
                    switch (column) {
                        case 'invoiceType':
                            this.queryParams.invoiceTypes = []
                            break;
                        case 'accountStatus':
                            this.queryParams.accountStatuses = []
                            break;
                        case 'processStatus':
                            this.queryParams.processStatuses = []
                            break;
                        case 'invoiceStatus':
                            this.queryParams.invoiceStatuses = []
                            break;
                        case 'checkStatus':
                            this.queryParams.checkStatuses = []
                            break;
                        case 'collectStatus':
                            this.queryParams.collectStatuses = []
                            break;
                        case 'signStatus':
                            this.queryParams.signStatuses = []
                            break;
                        case 'matchStatus':
                            this.queryParams.matchStatuses = []
                            break;
                        case 'submitStatus':
                            this.queryParams.submitStatuses = []
                            break;
                    }
                }
                switch (column) {
                    case 'invoiceType':
                        this.isInvoiceTypeIndeterminate = false;
                        break;
                    case 'accountStatus':
                        this.isAccountStatusIndeterminate = false;
                        break;
                    case 'processStatus':
                        this.isProcessStatusIndeterminate = false;
                        break;
                    case 'invoiceStatus':
                        this.isInvoiceStatusIndeterminate = false;
                        break;
                    case 'checkStatus':
                        this.isCheckStatusIndeterminate = false;
                        break;
                    case 'collectStatus':
                        this.isCollectStatusIndeterminate = false;
                        break;
                    case 'signStatus':
                        this.isSignStatusIndeterminate = false;
                        break;
                    case 'matchStatus':
                        this.isMatchStatusIndeterminate = false;
                        break;
                    case 'submitStatus':
                        this.isSubmitStatusIndeterminate = false;
                        break;
                }

            },

            handleCheckedChange(value, column){
                let checkedCount = value.length;
                switch (column) {
                    case 'invoiceType':
                        this.checkAllInvoiceType = checkedCount === this.dict.type.invoice_type.length;
                        this.isInvoiceTypeIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.invoice_type.length;
                        break;
                    case 'accountStatus':
                        this.checkAllAccountStatus = checkedCount === this.dict.type.account_status.length;
                        this.isAccountStatusIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.account_status.length;
                        break;
                    case 'processStatus':
                        this.checkAllProcessStatus = checkedCount === this.dict.type.process_status.length;
                        this.isProcessStatusIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.process_status.length;
                        break;
                    case 'invoiceStatus':
                        this.checkAllInvoiceStatus = checkedCount === this.dict.type.invoice_status.length;
                        this.isInvoiceStatusIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.invoice_status.length;
                        break;
                    case 'checkStatus':
                        this.checkAllCheckStatus = checkedCount === this.dict.type.check_status.length;
                        this.isCheckStatusIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.check_status.length;
                        break;
                    case 'collectStatus':
                        this.checkAllCollectStatus = checkedCount === this.dict.type.collect_status.length;
                        this.isCollectStatusIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.collect_status.length;
                        break;
                    case 'signStatus':
                        this.checkAllSignStatus = checkedCount === this.dict.type.sign_status.length;
                        this.isSignStatusIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.sign_status.length;
                        break;
                    case 'matchStatus':
                        this.checkAllMatchStatus = checkedCount === this.dict.type.match_status.length;
                        this.isMatchStatusIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.match_status.length;
                        break;
                    case 'submitStatus':
                        this.checkAllSubmitStatus = checkedCount === this.dict.type.submit_status.length;
                        this.isSubmitStatusIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.submit_status.length;
                        break;
                }

            },
            // 转中文金额
            menoyToUppercase(money) {
                var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖');    //汉字的数字
                var cnIntRadice = new Array('', '拾', '佰', '仟'); //基本单位
                var cnIntUnits = new Array('', '万', '亿', '兆');  //对应整数部分扩展单位
                var cnDecUnits = new Array('角', '分', '毫', '厘'); //对应小数部分单位
                var cnInteger = '整';    //整数金额时后面跟的字符
                var cnIntLast = '元';    //整数完以后的单位
                //最大处理的数字
                var maxNum = 999999999999999.9999;
                var integerNum;  //金额整数部分
                var decimalNum;  //金额小数部分
                //输出的中文金额字符串
                var chineseStr = '';
                var parts;      //分离金额后用的数组，预定义
                if (money == '') { return ''; }

                money = parseFloat(money);
                if (money >= maxNum) {
                    //超出最大处理数字
                    return '超出最大处理数字';
                }
                if (money == 0) {
                    chineseStr = cnNums[0] + cnIntLast + cnInteger;
                    return chineseStr;
                }
                //四舍五入保留两位小数,转换为字符串
                money = Math.round(money * 100).toString();
                integerNum = money.substr(0,money.length-2);
                decimalNum = money.substr(money.length-2);
                //获取整型部分转换
                if (parseInt(integerNum, 10) > 0) {
                    var zeroCount = 0;
                    var IntLen = integerNum.length;
                    for (var i = 0; i < IntLen; i++) {
                        var n = integerNum.substr(i, 1);
                        var p = IntLen - i - 1;
                        var q = p / 4;
                        var m = p % 4;
                        if (n == '0') {
                            zeroCount++;
                        } else {
                            if (zeroCount > 0) {
                                chineseStr += cnNums[0];
                            }
                            //归零
                            zeroCount = 0;
                            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
                        }
                        if (m == 0 && zeroCount < 4) {
                            chineseStr += cnIntUnits[q];
                        }
                    }
                    chineseStr += cnIntLast;
                }
                //小数部分
                if (decimalNum != '') {
                    var decLen = decimalNum.length;
                    for (var i = 0; i < decLen; i++) {
                        var n = decimalNum.substr(i, 1);
                        if (n != '0') {
                            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
                        }
                    }
                }
                if (chineseStr == '') {
                    chineseStr += cnNums[0] + cnIntLast + cnInteger;
                } else if (decimalNum == '' || /^0*$/.test(decimalNum)) {
                    chineseStr += cnInteger;
                }
                return chineseStr;
            },

        },


    };
</script>

